import React, { Component, createContext } from 'react'
import Father from './Father'
import { Provider } from '../utils/context'
import { Button, Table, Tag, Space } from 'antd'

// const { Provider, Consumer } = createContext()
// Provider ==>  提供数据
// Consumer ==>  使用数据


class GrandFather extends Component {
    state = {
        title: "我是爷爷留下的东西",
        count: 100,
        flag: false,
        columns: [
            {
                // 表头
                title: '姓名',
                // 匹配列表里面的key
                dataIndex: 'name',
                key: 'name',
                // 展示视图
                // render: text => <a>{text}</a>,
                render: (text) => {
                    return <a>{text}</a>
                }
            },
            {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
            },
            {
                title: '住址',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <Space size="middle">
                        <Button onClick={() => {
                            this.setState({
                                flag: true
                            })
                        }} type="primary">编辑</Button>
                        <Button danger type="primary">删除</Button>
                    </Space>
                ),
            },
        ],
        data: [
            {
                key: '1',
                name: '张三',
                age: 32,
                address: 'New York No. 1 Lake Park',
                tags: ['nice', 'developer'],
            },
            {
                key: '2',
                name: 'Jim Green',
                age: 42,
                address: 'London No. 1 Lake Park',
                tags: ['loser'],
            },
            {
                key: '3',
                name: 'Joe Black',
                age: 32,
                address: 'Sidney No. 1 Lake Park',
                tags: ['cool', 'teacher'],
            },
        ]
    }
    render() {
        // this ==> GrandFather
        const { flag, columns } = this.state
        return (
            <div>
                {/* className="grand" */}
                GrandFather --- {this.state.count}

                <h3>
                    {
                        flag ? '弹框' : '没有弹框'
                    }
                </h3>

                <Table columns={columns} dataSource={this.state.data} />

                {/* <button onClick = {() => {
                    this.setState({
                        count: this.state.count += 1
                    })
                }}>++</button> */}
                {/* 传递数据的准备 */}
                {/* <Provider value = { this.state.count }>
                    <Father/>
                </Provider> */}
            </div>
        )
    }
}


export default GrandFather
